<template>
  <div :id="idString" style="height:300px;">
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      text: String
    },
    data () {
      return {
        idString: ''
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    computed: {
      chartOption () {
        return {
          // backgroundColor: '#0a142f',
          color: ['#33317E', '#F27011', '#6360e8'],
          title: [
            {
              text: '分类占比',
              left: 'center',
              top: '38%', // 大小可改
              textStyle: {
                fontSize: 16,
                color: '#333333'
              }
            }
          ],
          graphic: { // 图形中间文字
            type: 'text',
            left: 'center',
            top: '50%', // 大小可改
            style: {
              text: this.text,
              textAlign: 'center',
              fill: '#F27011',
              fontSize: 40,
              fontFamily: 'Oxanium'
            }
          },
          series: [
            {
              type: 'pie',
              name: '外圆环',
              radius: ['100%', '95%'],
              center: ['50%', '50%'],
              hoverAnimation: false,
              startAngle: -120,
              label: {
                show: false
              },
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 1
              },
              data: [
                { name: '', value: 1500 }, {
                  name: '',
                  value: 500
                }, {
                  name: '',
                  value: 1500
                }]
            },
            {
              name: '',
              type: 'pie',
              radius: ['56%', '75%'],
              center: ['50%', '50%'],
              silent: true,
              clockwise: true,
              startAngle: -120,
              z: 0,
              zlevel: 0,
              label: {
                show: false
              },
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 1
              },
              labelLine: {
                show: false
              },
              data: [{ name: '', value: 1500 }, {
                name: '',
                value: 500,
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(242,112,17,.5)'
                  }
                }
              }, {
                name: '',
                value: 1500,
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(99,96,232,1)'
                  }
                }
              }]
            }
          ]
        }
      }
    },
    async mounted () {
      const myChart = echarts.init(document.getElementById(this.idString))
      myChart.setOption(this.chartOption)
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
</style>
